<template>
  <div ref="chart" style="width: 300px; height: 200px;"></div>
</template>
<script setup>
import {ref} from 'vue'
import * as echarts from 'echarts'

const chart = ref(null)
import request5151 from "../../utils/request5151.js";

const getData = () => {
  request5151({
    url: '/studentinfo/GenderOfStudentCount',
    method: 'get',
  }).then((res) => {
    const data = res.data.data
    const echartInstance = echarts.init(chart.value)
    const option = {
      title: {
        text:'性别统计',
        subtext: '人数',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: 20,
        },
      },
      tooltip: {trigger: 'item'},
      series: [{
        type: 'pie',
        radius: '50%',
        data: data.map(dp => ({
          name: dp.sgender,
          value: dp.total
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    }
    echartInstance.setOption(option)
  })
}
getData()
</script>
<style scoped>

</style>
